<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
         body {
            /* padding: 30px; */
            background: #1C1D1E;
            border-radius: 10px;
        }
        #localVideo{
            position: absolute;
            /* border-radius: 100px; */
            /* -webkit-mask: radial-gradient(closest-side circle,#000 85%, transparent 90%); */
            box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
        }
        #localVideo::before{
            position: relative;
            content: "DDD";
            background-color: RED;
        }
    </style>
</head>
<body>
    <video id="localVideo" autoplay playsinline muted></video>
    <script>
        // 调用摄像头
        // 切换摄像头。可以切换成虚拟摄像头

        //第一步，获取到本地媒体,getUserMedia  调用摄像头
        // 注意兼容性 
        function cameraStart() {
            let isFront = false;

            let config = {
                audio: false, video: true, video: {
                    width: 200,
                    height: 200,
                    // 前后置摄像头
                    facingMode: isFront ? "user" : "environment",
                    // 帧率设置. 字面意思，一个是理想的状态下面，一个是最大的帧率
                    frameRate: { ideal: 30, max: 30 }
                },
            };
            let video = document.querySelector("video");
            function successCallback(stream) {
                // 将返回的流提供给控制台进行检查
                window.stream = stream;
                console.log(stream)
                video.srcObject = stream;
                // 播放
                video.play();
            }
            function errorCallback(error) {
                console.log("navigator.getUserMedia error: ", error);
            }
            // 传入3个参数，第一个是配置，第二个是成功的回调
            // 这个更加规范了，多加了一个mediaDevices。window.navigator.getUserMedia(config, successCallback, errorCallback);
            navigator.mediaDevices.getUserMedia(config)
                .then(function (stream) {
                    successCallback(stream)
                })
                .catch(function (err) {
                    errorCallback(err)
                });

        }
        // 调用
        cameraStart()
    </script>
</body>
</html>